<template>
  <div class="top-title">
    <!-- :is-search值变化，标题有上下抖动，是因为高度不一样导致，使用line-height来调整 -->
    <yk-title :level="3" style="margin: 0; line-height:36px">{{ props.name }}</yk-title>
    <slot name="custom" />
    <yk-space size ="s" v-if="isSearch">
      <yk-button type="secondary" v-show="searchData" @click="cancleSearch">取消搜索</yk-button>
      <yk-input-search  placeholder="请输入..." style="width: 320px" v-model="searchData" @search="search">
        <template #suffix>
        <yk-button type="secondary"><IconSearchOutline/></yk-button>
      </template>  

      </yk-input-search>
    </yk-space>
  </div>
</template>
 <script lang="ts" setup>
 import {ref} from 'vue'
 const searchData = ref()
type titleProps = {
  name: string;
  isSearch: boolean;
};
const props = withDefaults(defineProps<titleProps>(), {
  name: "总览",
  isSearch: true
});

const emit =defineEmits(['search'])
//搜索事件
const search =() =>{
    emit('search',searchData.value)
}
//取消事件
const cancleSearch =() =>{
    emit('search','')
    searchData.value =''
}

</script>
 <style lang="less" scoped>
 .top-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
</style>